//var timer = new Timer("chrono");

function resetDiv(id){
	getDiv(id).innerHTML = '';
	return getDiv(id);
}

function getDiv(id){
	return document.getElementById(id);
}

function createCanvas(id,width,height){
	var canvas = document.createElement("canvas");
	canvas.setAttribute("id",id);
	canvas.setAttribute("width",width);
	canvas.setAttribute("height",height);
	return canvas;
}

function createShape(idDiv,shapeFunction,red,green,blue,id){
	try {
		resetDiv(idDiv).appendChild(eval(shapeFunction)(red,green,blue,id));
	}
	catch (e){
		var p = document.createElement("p");
		p.innerHTML = "Aucune fonction trouvée";
		resetDiv(idDiv).appendChild(p);
	}
}

function createShapeFromXHR(xhr){
	var json = JSON.parse(xhr.responseText);
	setShape(json['shape']['shapeName']);
	createShape("left",json['shape']['javascriptFunction'],json['firstColor']['redQuantity'],json['firstColor']['greenQuantity'],json['firstColor']['blueQuantity'],json['firstColor']['colorName']);
	createShape("right",json['shape']['javascriptFunction'],json['secondColor']['redQuantity'],json['secondColor']['greenQuantity'],json['secondColor']['blueQuantity'],json['secondColor']['colorName']);
	removeLoadingImage();
	//timer.reset();
	//timer.start();
	setChronoToNow();
}

function setShape(shapeName){
	document.getElementById("shapeName").value = shapeName;
}

function getShape(){
	return document.getElementById("shapeName").value;
}

function manageKeyDown(e){
	//timer.stop();
	if(hasCanvas()){
		switch(e.keyCode){
			case 37 : ajaxLoad("saveTestAnswer",getAnswerData("left"),launchShapeCreation);break;
			case 39 : ajaxLoad("saveTestAnswer",getAnswerData("right"),launchShapeCreation);break;
		}
	}
}

function hasCanvas(){
	return document.getElementById("left").getElementsByTagName("canvas").length >0;
}

function getCanvasId(divId){
	try{
		return document.getElementById(divId).getElementsByTagName("canvas").item(0).id;
	}
	catch (e) {
		return false;
	}
}

function getChrono(){
	return document.getElementById("chrono").innerHTML;
}

function getTimeDifference(){
	return todayDateInMilliseconds() - getChrono();
}

function todayDateInMilliseconds(){
	return new Date().getTime();
}

function setChronoToNow(){
	document.getElementById("chrono").innerHTML = todayDateInMilliseconds();
}

function getCount(){
	return parseInt(document.getElementById("count").innerHTML);
}

function getStepsNumber(){
	return parseInt(document.getElementById("allSteps").innerHTML);
}

function incrCount(){
	document.getElementById("count").innerHTML = getCount() + 1;
}

function getAnswerData(divId){
	var data = "leftColorName="+getCanvasId("left")+"&rightColorName="+getCanvasId("right")+"&shapeName="+getShape()+"&chosenColorName="+getCanvasId(divId)+"&time="+getTimeDifference();
	var img = document.createElement("img");
	img.setAttribute("src","../img/loading.gif");
	img.setAttribute("id","loadingImage");
	var page = getDiv("page");
	page.appendChild(img);
	getDiv("left").innerHTML = "";
	getDiv("right").innerHTML = "";
	return data;
}

function removeLoadingImage(){
	var loading = document.getElementById("loadingImage");
	if(loading != null) {loading.parentNode.removeChild(loading);}
}

function launchShapeCreation(xhr){
	if(getCount() < getStepsNumber()){
		incrCount();
		ajaxLoad("getRandomColoredName",null,createShapeFromXHR);
	}
	else
	{
		ajaxLoad("saveAllAnswers",null,redirectToSetpoint);
	}
}

function redirectToSetpoint(xhr){
	window.location = "setpoint.php";
}

function redirectToColorTest(){
	window.location = "canvas.php";
}

function createCircle(red,green,blue,id,radius){
	if(!radius) radius = 100;
	var canvas = createCanvas(id,radius*2,radius*2);
	var context = canvas.getContext("2d");
	context.beginPath();
	context.fillStyle = "rgb("+red+","+green+","+blue+")";
	context.arc(radius,radius,radius,0,(Math.PI/180)*360);
	context.fill();
	context.closePath();
	return canvas;
}

function createSquare(red,green,blue,id,side){
	if(!side) side = 200;
	return createRect(red,green,blue,id,side);
}

function createRect(red,green,blue,id,width,height){
	if(!width) width = 200;
	if(!height) height = 200;
	var canvas = createCanvas(id,width,height);
	var context = canvas.getContext("2d");
	context.fillStyle = "rgb("+red+","+green+","+blue+")";
	context.beginPath();
	context.moveTo(0, 0);
	context.lineTo(width, 0);
	context.lineTo(width, height);
	context.lineTo(0, height);
	context.closePath();
	context.fill();
	return canvas;
}

function createTriangle(red,green,blue,id,width,height){
	if(!width) width = 200;
	if(!height) height = 200;
	var canvas = createCanvas(id,width,height);
	var context = canvas.getContext("2d");
	context.fillStyle = "rgb("+red+","+green+","+blue+")";
	
	context.beginPath();
	context.moveTo(0, height);
	context.lineTo(width, height);
	context.lineTo(width/2, 0);
	context.closePath();
	
	context.fill();
	return canvas;
}